<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live2D 加载测试</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: 'Microsoft YaHei', sans-serif;
            background: #f0f0f0;
        }
        
        #status {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        .step {
            padding: 10px;
            margin: 5px 0;
            border-left: 4px solid #ccc;
            background: #f9f9f9;
        }
        
        .step.loading { border-color: #ff9800; color: #ff9800; }
        .step.success { border-color: #4caf50; color: #4caf50; }
        .step.error { border-color: #f44336; color: #f44336; }
        
        #canvas-container {
            width: 800px;
            height: 600px;
            background: #00FF00;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <h1>🎨 Live2D 模型加载诊断</h1>
    
    <div id="status">
        <div id="step1" class="step">1. 正在加载 PIXI.js...</div>
        <div id="step2" class="step">2. 等待加载 pixi-live2d-display...</div>
        <div id="step3" class="step">3. 等待初始化应用...</div>
        <div id="step4" class="step">4. 等待加载模型...</div>
        <div id="step5" class="step">5. 等待连接 WebSocket...</div>
    </div>
    
    <div id="canvas-container"></div>
    
    <script>
        // 更新步骤状态
        function updateStep(id, status, message) {
            const el = document.getElementById(id);
            el.className = `step ${status}`;
            el.textContent = message;
        }
        
        // 1. 加载 PIXI.js
        const pixiScript = document.createElement('script');
        pixiScript.src = 'https://cdn.jsdelivr.net/npm/pixi.js@7.x/dist/pixi.min.js';
        pixiScript.onload = () => {
            updateStep('step1', 'success', '1. ✓ PIXI.js 加载成功 (版本: ' + PIXI.VERSION + ')');
            loadLive2DPlugin();
        };
        pixiScript.onerror = () => {
            updateStep('step1', 'error', '1. ✗ PIXI.js 加载失败 - CDN 可能被屏蔽');
        };
        document.head.appendChild(pixiScript);
        
        // 2. 加载 pixi-live2d-display
        function loadLive2DPlugin() {
            updateStep('step2', 'loading', '2. 正在加载 pixi-live2d-display...');
            
            const live2dScript = document.createElement('script');
            live2dScript.src = 'https://cdn.jsdelivr.net/npm/pixi-live2d-display@0.5.0/dist/index.min.js';
            live2dScript.onload = () => {
                updateStep('step2', 'success', '2. ✓ pixi-live2d-display 加载成功');
                initApp();
            };
            live2dScript.onerror = () => {
                updateStep('step2', 'error', '2. ✗ pixi-live2d-display 加载失败 - CDN 可能被屏蔽');
            };
            document.head.appendChild(live2dScript);
        }
        
        // 3. 初始化应用
        let app, model;
        async function initApp() {
            try {
                updateStep('step3', 'loading', '3. 正在初始化 PIXI 应用...');
                
                app = new PIXI.Application({
                    width: 800,
                    height: 600,
                    backgroundColor: 0x00FF00,
                    backgroundAlpha: 1
                });
                
                document.getElementById('canvas-container').appendChild(app.view);
                
                updateStep('step3', 'success', '3. ✓ PIXI 应用初始化成功');
                loadModel();
                
            } catch (error) {
                updateStep('step3', 'error', '3. ✗ 应用初始化失败: ' + error.message);
                console.error(error);
            }
        }
        
        // 4. 加载模型
        async function loadModel() {
            try {
                updateStep('step4', 'loading', '4. 正在加载 Live2D 模型...');
                
                // 尝试加载模型
                const modelPath = '/models/hiyori/runtime/hiyori_free_t08.model3.json';
                console.log('模型路径:', modelPath);
                
                model = await PIXI.live2d.Live2DModel.from(modelPath);
                
                // 设置模型
                model.anchor.set(0.5, 0.5);
                model.x = 400;
                model.y = 300;
                model.scale.set(0.3);
                
                app.stage.addChild(model);
                
                updateStep('step4', 'success', '4. ✓ Live2D 模型加载成功！');
                console.log('模型信息:', model);
                
                connectWebSocket();
                
            } catch (error) {
                updateStep('step4', 'error', '4. ✗ 模型加载失败: ' + error.message);
                console.error('详细错误:', error);
                console.error('错误堆栈:', error.stack);
            }
        }
        
        // 5. WebSocket 连接
        function connectWebSocket() {
            try {
                updateStep('step5', 'loading', '5. 正在连接 WebSocket...');
                
                const ws = new WebSocket('ws://localhost:8765');
                
                ws.onopen = () => {
                    updateStep('step5', 'success', '5. ✓ WebSocket 已连接');
                };
                
                ws.onerror = () => {
                    updateStep('step5', 'error', '5. ✗ WebSocket 连接失败 - 请确保 main.py 正在运行');
                };
                
            } catch (error) {
                updateStep('step5', 'error', '5. ✗ WebSocket 错误: ' + error.message);
            }
        }
    </script>
</body>
</html>
